<template>
  <div class="frequency-config">
    <!-- 频率设置区 -->
    <el-card class="box-card" shadow="hover">
      <div slot="header">采集频率设置</div>
      <div class="freq-setting">
        <el-slider
          v-model="frequency"
          :min="100"
          :max="10000"
          :step="1"
          show-input
          style="width: 60%;"
        />
        <el-input-number
          v-model="frequency"
          :min="100"
          :max="10000"
          :step="1"
          style="margin-left: 20px;"
        />
        <el-button type="primary" @click="saveFrequency" style="margin-left: 20px;">保存设置</el-button>
      </div>
    </el-card>

    <!-- 采集启停控制 -->
    <el-card class="box-card" shadow="hover" style="margin-top: 24px;">
      <div slot="header">采集启停控制</div>
      <el-radio-group v-model="mode" style="margin-bottom: 16px;">
        <el-radio label="manual">手动模式</el-radio>
        <el-radio label="auto">自动模式</el-radio>
      </el-radio-group>

      <div v-if="mode === 'manual'">
        <el-button type="success" @click="startCollect">启动采集</el-button>
        <el-button type="danger" @click="stopCollect" style="margin-left: 12px;">停止采集</el-button>
      </div>

      <div v-else>
        <el-checkbox-group v-model="autoTriggers">
          <el-checkbox label="device">设备运行状态触发</el-checkbox>
          <el-checkbox label="time">时间计划触发</el-checkbox>
        </el-checkbox-group>
        <div v-if="autoTriggers.includes('device')" style="margin-top: 12px;">
          <el-input-number
            v-model="deviceLoad"
            :min="0"
            :max="100"
            :step="1"
            label="设备负载"
          /> % 时启动采集
        </div>
        <div v-if="autoTriggers.includes('time')" style="margin-top: 12px;">
          <el-time-picker
            v-model="timeRange"
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      frequency: 100,
      mode: 'manual',
      autoTriggers: [],
      deviceLoad: 70,
      timeRange: [],
    };
  },
  methods: {
    saveFrequency() {
      // 保存频率设置逻辑
      this.$message.success(`频率已设置为 ${this.frequency} Hz`);
    },
    startCollect() {
      // 启动采集逻辑
      this.$message.success('采集已启动');
    },
    stopCollect() {
      // 停止采集逻辑
      this.$message.warning('采集已停止');
    },
  },
};
</script>

<style scoped>
.frequency-config {
  max-width: 700px;
  margin: 0 auto;
  padding: 32px 0;
}
.box-card {
  margin-bottom: 24px;
}
.freq-setting {
  display: flex;
  align-items: center;
}
</style>
